import Taro, { Component } from '@tarojs/taro'
import { View, Button, Image, Form, Input } from '@tarojs/components'
import { redirectBack } from '@/utils/router'
import { toast } from '@/utils/feedBack'
import { phoneLogin, getCode } from '@/utils/login/phoneLogin'
import validate from 'kuan-utils/lib/validate'
import { isWx } from '@/utils/validate'
import './index.scss'

const isDev = process.env.NODE_ENV === 'development'

export default class Bind extends Component {
  config = {
    navigationBarTitleText: '绑定手机号'
  }

  state = {
    num: 60,
    phone: isDev ? 17638190467 : '',
    code: isDev ? 1111 : ''
  }
  async getCode() {
    const { num, phone } = this.state
    if (num !== 60) return
    if (!validate.isPhone(phone)) {
      return toast('请正确输入手机号')
    }
    await getCode(phone)
    this.startTimer()
  }
  startTimer() {
    this.clearTimer()
    const { num } = this.state
    if (num <= 1) {
      this.setState({
        num: 60
      })
      return
    }
    this.setState({
      num: num - 1
    })
    this.timer = setTimeout(() => {
      this.startTimer()
    }, 1000)
  }
  handleChange(e, type) {
    this.setState({
      [type]: e.detail.value
    })
  }
  clearTimer() {
    if (this.timer) clearTimeout(this.timer)
  }
  formSubmit = async () => {
    const { phone, code } = this.state || {}
    if (!validate.isPhone(phone)) {
      return toast('请正确输入手机号')
    }
    if (!code) return toast('请输入验证码')
    if (isWx) {
      Taro.login({
        success: ({ code: wechat_code }) => {
          if (wechat_code) {
            // 开始登陆
            phoneLogin({ phone, code, wechat_code }).then(() => {
              toast('登陆成功')
              // 重定向返回
              redirectBack()
            })
          } else {
            this.$toast('登陆失败')
          }
        },
        fail() {
          this.$toast('登陆失败')
        }
      })
    } else {
      phoneLogin({
        phone,
        code
      })
        .then(() => {
          toast('登陆成功')
          redirectBack()
        })
        .catch(e => {
          console.log(e)
          toast('登陆失败')
        })
    }
  }
  render() {
    const { num, code, phone } = this.state
    return (
      <View>
        <View className='center-flex bind-container'>
          <View className='bind-wrap'>
            <Image className='logo' src={require('./images/logo.png')} />

            <Form className='form-container' onSubmit={this.formSubmit}>
              <View className='form-item'>
                <Input
                  maxlength='11'
                  placeholder-style='color: #999'
                  name='phone'
                  type='text'
                  value={phone}
                  placeholder='请输入手机号'
                  onChange={e => this.handleChange(e, 'phone')}
                />
                <View onClick={this.getCode} className='get-code center-flex'>
                  {num === 60 ? '获取验证码' : num}
                </View>
              </View>

              <View className='form-item'>
                <Input
                  placeholder-style='color: #999'
                  name='code'
                  type='text'
                  value={code}
                  placeholder='请输入验证码'
                  onChange={e => this.handleChange(e, 'code')}
                />
              </View>

              <Button formType='submit' className='center-flex confirm-btn'>
                绑定手机号
              </Button>
            </Form>
          </View>
        </View>
      </View>
    )
  }
}
